<template>
  <div class="users-container">
    <el-container>
      <!-- 顶部 -->
      <el-header>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-input v-model="input4" placeholder="搜索关键字">
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </el-input>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-select v-model="value1" multiple collapse-tags placeholder="会员等级">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-button type="primary" round icon="el-icon-search">搜索</el-button>

              <el-button type="info" round icon="el-icon-refresh-right">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 内容 -->
      <el-main>
        <template>
          <el-table
            :data="Userdata"
            style="width: 100%"
          >
            <el-table-column prop="name" label="会员" width="200" />
            <el-table-column prop="province" label="会员等级" width="200" />
            <el-table-column prop="city" label="登录注册" width="300" />
            <el-table-column label="状态" width="100">
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '普通会员'
      }, {
        value: '选项2',
        label: '白银会员'
      }, {
        value: '选项3',
        label: '黄金会员'
      }, {
        value: '选项4',
        label: '砖石会员'
      }],
      value1: []
    }
  }
}
</script>

<style></style>
